/* eslint-disable react/no-unknown-property */
/* eslint-disable @typescript-eslint/strict-boolean-expressions */
/* eslint-disable @typescript-eslint/naming-convention */
/* eslint-disable @typescript-eslint/explicit-function-return-type */
/* eslint-disable @typescript-eslint/restrict-template-expressions */
import React, { FC, useState } from 'react'
import style from './Header.module.scss'
import { NavLink } from 'react-router-dom'
import { indexRoutes } from '@/router/router.config'
import { Dropdown, Menu } from 'antd'
import type { MenuProps } from 'antd'
import { useTranslation } from 'react-i18next'
import { changeDark, changeLight } from '@/themes'
import { TranslationOutlined } from '@ant-design/icons'

import Search from '../Search'
const src =
  'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg'

const language = ['en', 'zh']

const Header: FC = () => {
  const [flag, setFlag] = useState(true)
  const { t, i18n } = useTranslation()
  const handleChange = (value: string): void => {
    void i18n.changeLanguage(value)

    localStorage.setItem('lang', i18n.language)
  }
  const items: MenuProps['items'] = [
    {
      key: '2',
      label: (
        <Menu>
          {language.map((it) => {
            return (
              <Menu.Item key={it} onClick={() => handleChange(it)}>
                {t('language.' + it)}
              </Menu.Item>
            )
          })}
        </Menu>
      )
    }
  ]
  const setThemes = (): void => {
    changeDark()
    setFlag(!flag)
  }
  const setTheme = (): void => {
    changeLight()
    setFlag(!flag)
  }
  // const content = (
  //   <div>
  //     <Select
  //       style={{ width: 120 }}
  //       onChange={handleChange}
  //       options={[
  //         {
  //           value: 'zh',
  //           label: '中文'
  //         },
  //         {
  //           value: 'en',
  //           label: '英文'
  //         }
  //       ]}
  //     />
  //   </div>
  // )
  // const [open, setOpen] = useState(false)
  // const showDrawer = () => {
  //   setOpen(true)
  // }

  // const onClose = () => {
  //   setOpen(false)
  // }
  // const [icon, setIcon] = useState<Boolean>(true)

  // const bage_Switch = () => {
  //   setIcon(!icon)
  //   if (icon) {
  //     changeDark()
  //   } else {
  //     changeLight()
  //   }

  // }
  return (
    <div className={style.header}>
      <div className={style.container}>
        <ul>
          <li>
            <img src={src} className={style.icon} alt="" />
          </li>
          {indexRoutes.map((item) => {
            return (
              <li key={item.path}>
                <NavLink to={item.path}>
                  {t('header.' + item.meta?.title)}
                </NavLink>
              </li>
            )
          })}
        </ul>
        <div className={style.right}>
          <div className={style.text}>
            <Search></Search>
            {/* <SearchOutlined /> */}
          </div>

          <div className={style.text}>
            {flag
              ? (
              <div className={style.sun} onClick={setThemes}></div>
                )
              : (
              <div className={style.moon} onClick={setTheme}></div>
                )}
          </div>

          <Dropdown menu={{ items }}>
            <div
              className={style.text}
              style={{
                alignItems: 'center',
                width: 24,
                cursor: 'pointer',
                fontSize: '25px'
              }}
            >
              <TranslationOutlined />
            </div>
          </Dropdown>

          {/* <span className={style.themes} onClick={bage_Switch}>
            {icon
              ? (
              <span>
                {' '}
                <svg
                  className="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="26264"
                  width="35"
                  height="35"
                >
                  <path
                    d="M501.48 493.55m-233.03 0a233.03 233.03 0 1 0 466.06 0 233.03 233.03 0 1 0-466.06 0Z"
                    fill="#F9C626"
                    p-id="26265"
                  ></path>
                  <path
                    d="M501.52 185.35H478.9c-8.28 0-15-6.72-15-15V87.59c0-8.28 6.72-15 15-15h22.62c8.28 0 15 6.72 15 15v82.76c0 8.28-6.72 15-15 15zM281.37 262.76l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.86-5.86-15.36 0-21.21l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.35 0 21.21zM185.76 478.48v22.62c0 8.28-6.72 15-15 15H88c-8.28 0-15-6.72-15-15v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15zM270.69 698.63l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.36 5.86-21.21 0l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.85-5.86 15.35-5.86 21.21 0zM486.41 794.24h22.62c8.28 0 15 6.72 15 15V892c0 8.28-6.72 15-15 15h-22.62c-8.28 0-15-6.72-15-15v-82.76c0-8.28 6.72-15 15-15zM706.56 709.31l16-16c5.86-5.86 15.36-5.86 21.21 0l58.52 58.52c5.86 5.86 5.86 15.36 0 21.21l-16 16c-5.86 5.86-15.36 5.86-21.21 0l-58.52-58.52c-5.86-5.85-5.86-15.35 0-21.21zM802.17 493.59v-22.62c0-8.28 6.72-15 15-15h82.76c8.28 0 15 6.72 15 15v22.62c0 8.28-6.72 15-15 15h-82.76c-8.28 0-15-6.72-15-15zM717.24 273.44l-16-16c-5.86-5.86-5.86-15.36 0-21.21l58.52-58.52c5.86-5.86 15.36-5.86 21.21 0l16 16c5.86 5.86 5.86 15.36 0 21.21l-58.52 58.52c-5.86 5.86-15.35 5.86-21.21 0z"
                    fill="#F9C626"
                    p-id="26266"
                  ></path>
                </svg>
              </span>
                )
              : (
              <span>
                <svg
                  className="theme"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1491"
                  width="32"
                  height="32"
                >
                  <path
                    d="M551.41 326.72h-74.14c-10.24 0-18.56-8.3-18.56-18.54 0-10.24 8.31-18.54 18.56-18.54h74.14c10.24 0 18.56 8.3 18.56 18.54 0 10.24-8.32 18.54-18.56 18.54z"
                    fill="#e684af"
                    p-id="1492"
                  ></path>
                  <path
                    d="M773.93 697.54c-245.78 0-445.01-199.23-445.01-445 0-55.23 10.08-108.13 28.48-156.94C189.08 159.05 69.34 321.61 69.34 512.14c0 245.76 199.23 445 445.01 445 190.51 0 353.07-119.74 416.51-288.07-48.8 18.4-101.7 28.47-156.93 28.47z"
                    fill="#e684af"
                    p-id="1493"
                  ></path>
                  <path
                    d="M551.41 920.05c-245.75 0-444.98-199.23-444.98-445 0-113.41 42.44-216.91 112.26-295.48-91.61 81.5-149.35 200.28-149.35 332.57 0 245.76 199.23 445 445.01 445 132.26 0 251.05-57.74 332.55-149.37-78.57 69.85-182.08 112.28-295.49 112.28z"
                    fill="#e684af"
                    p-id="1494"
                  ></path>
                  <path
                    d="M736.84 308.17c0 10.24-8.31 18.54-18.55 18.54-10.22 0-18.53-8.3-18.53-18.54 0-10.24 8.32-18.54 18.53-18.54 10.24 0 18.55 8.3 18.55 18.54z"
                    fill="#e684af"
                    p-id="1495"
                  ></path>
                  <path
                    d="M644.14 493.59c0 10.23-8.31 18.54-18.56 18.54-10.24 0-18.53-8.32-18.53-18.54 0-10.24 8.29-18.54 18.53-18.54 10.25 0 18.56 8.3 18.56 18.54z"
                    fill="#e684af"
                    p-id="1496"
                  ></path>
                  <path
                    d="M959.33 270.79c0 10.24-8.31 18.54-18.53 18.54-10.24 0-18.56-8.3-18.56-18.54 0-10.24 8.31-18.54 18.56-18.54 10.22 0 18.53 8.29 18.53 18.54z"
                    fill="#e684af"
                    p-id="1497"
                  ></path>
                  <path
                    d="M625.58 85.37c0 10.24-8.29 18.54-18.53 18.54-10.24 0-18.56-8.3-18.56-18.54 0-10.23 8.31-18.53 18.56-18.53 10.25 0 18.53 8.3 18.53 18.53z"
                    fill="#e684af"
                    p-id="1498"
                  ></path>
                  <path
                    d="M514.35 234c-10.24 0-18.56 8.31-18.56 18.54V363.8c0 10.23 8.31 18.53 18.56 18.53 10.22 0 18.53-8.3 18.53-18.53V252.54c0-10.23-8.31-18.54-18.53-18.54z"
                    fill="#e684af"
                    p-id="1499"
                  ></path>
                  <path
                    d="M829.55 437.96c-10.24 0-18.53 8.3-18.53 18.54v111.24c0 10.24 8.29 18.54 18.53 18.54 10.24 0 18.53-8.3 18.53-18.54V456.51c-0.01-10.25-8.29-18.55-18.53-18.55z"
                    fill="#e684af"
                    p-id="1500"
                  ></path>
                  <path
                    d="M866.63 530.67h-74.17c-10.24 0-18.53-8.3-18.53-18.53 0-10.24 8.29-18.54 18.53-18.54h74.17c10.24 0 18.53 8.3 18.53 18.54 0 10.22-8.28 18.53-18.53 18.53z"
                    fill="#e684af"
                    p-id="1501"
                  ></path>
                </svg>
              </span>
                )}
          </span> */}
        </div>
      </div>
    </div>
  )
}

export default Header
